<script setup lang="jsx">
import {computed, inject, provide, ref,watch} from "vue";
import pickup from "@/views/document/shipment/components/parcel/pickup.vue";
import Fba from "@/views/document/shipment/components/parcel/fba.vue";
import Turn from "@/views/document/shipment/components/parcel/turn.vue";
import Update from "@/views/document/shipment/components/parcel/update.vue";
import Add from "@/views/document/shipment/components/parcel/add.vue";
import { auth } from '@/utils/common'
import tool from '@/utils/tool'
const record = inject('record')
const pagination=ref(false)
watch( () => record, v => {
    if(v.value?.parcel.length>10){
      let pageSizeParel=tool.local.get('pageSizeParel') || 10
      pagination.value={
      size:'small',
      showTotal:true,
      showPageSize:true,
      defaultPageSize:pageSizeParel,
      pageSizeOptions:[10,20,30,50,100]
   }
  
}
},{immediate: true,deep: true})
const columnsDist = inject('columnsDist')//全部字典
const data = ref([]);
const visible = ref({
  update: false,
  pickup: false,
  fba: false,
  turn: false,
  add: false,
});

const depotList = computed(()=>columnsDist.value.dicthelpApi_depot.data)
const parcelData = computed(()=>record.value.parcel)
const tablePaginationChange=(data,extra)=>{
  if(extra.type=='pagination'){
    if(pagination.value.defaultPageSize!=extra.pageSize){
      tool.local.set('pageSizeParel', extra.pageSize)
    } 
  }
}

const carrerLink = (record) =>{
  if(!record.outer_carrier_tracking_number){
    return '';
  }
  if(record.outer_carrier_code.toUpperCase() == 'UPS'){
    return 'https://wwwapps.ups.com/WebTracking/track?loc=zh_CN&track.x=Track&trackNums='+record.outer_carrier_tracking_number;
  }
  if(record.outer_carrier_code.toUpperCase() == 'FEDEX'){
    return 'https://www.fedex.com/apps/fedextrack/?tracknumbers='+record.outer_carrier_tracking_number+'&cntry_code=cn';
  }
  if(record.outer_carrier_code.toUpperCase() == 'DPD'){
    return 'https://tracking.dpd.de/parcelstatus?query='+record.outer_carrier_tracking_number+'&locale=en_D2';
  }
  if(record.outer_carrier_code.toUpperCase() == 'OULALA'){
    return 'http://www.oulala-express.com/Search/index2.html?trackNo='+record.outer_carrier_tracking_number;
  }
  return ''
}
provide('parcelData', parcelData)
</script>

<template>
  <a-grid-item :span="24">
    <a-collapse :default-active-key="['1']" class="g-collapse-no-p">
      <a-collapse-item header="货箱信息" key="1">
        <template #extra>
          <a-button-group>
            <a-button v-if="record.has_audit == false" type="primary" size="mini" @click.stop="visible.pickup=true" v-auth="['document:parcel:pick']"><icon-edit />拣货</a-button>
            <a-button type="primary" size="mini" @click.stop="visible.turn=true" v-auth="['document:parcel:turn']"><icon-book />转单号</a-button>
            <a-button type="primary" size="mini" @click.stop="visible.fba=true" v-auth="['document:parcel:fba']"><icon-edit />FBA号/扩展箱号</a-button>
            <a-button v-if="record.has_audit == false && ( auth('document:parcel:cancel') || auth('document:parcel:delete') || auth('document:parcel:resend') )" type="primary" size="mini" @click.stop="visible.update=true"><icon-edit />取消/重新发货/移除</a-button>
            <a-button v-if="record.has_audit == false" type="primary" size="mini" @click.stop="visible.add=true" v-auth="['document:parcel:save']"><icon-edit />添加货箱</a-button>
<!--            <a-button type="primary" size="mini" @click.stop=""><icon-edit />确认数据</a-button>-->
          </a-button-group>
        </template>
        <div :class="{'tablePrant':record.parcel?.length>10}">   
        <a-table
                 :data="record.parcel"
                 :bordered="false"
                 :pagination="pagination"              
                 column-resizable
                 style="padding-bottom: 10px;"
                  @change="tablePaginationChange"
                 :sticky-header="true" :scrollbar="true" :stripe="true" :scroll="{ x: '100%', y: '100%' }"
        >
          <template #columns>
            <a-table-column title='箱号' data-index='number'>
              <template #cell="{ record }">
                <div><p>{{ record.number }}</p><p>{{ record.ext_number}}</p></div>
              </template>
            </a-table-column>
            <a-table-column title='客户数据' data-index='client'>
              <template #cell="{ record }">
                <div>{{ record.client_weight }}(kg)<br/>{{ record.client_length }}*{{ record.client_width }}*{{ record.client_height }}(cm)</div>
              </template>
            </a-table-column>
            <a-table-column title='拣货数据(实重/材重)' data-index='actual'>
              <template #cell="{ record }">
                <div v-if="record.status !== 1">
                  <span v-if="record.actual_weight >= record.actual_volume_weight"><span style="color:green">{{ record.actual_weight }}</span>/<span>{{record.actual_volume_weight}}</span>(kg)</span>
                  <span v-else><span>{{ record.actual_weight }}</span>/<span style="color:green">{{record.actual_volume_weight}}</span>(kg)</span>
                  <br/>{{ record.actual_length }}*{{ record.actual_width }}*{{ record.actual_height }}(cm)</div>
                <div v-else> - </div>
              </template>
            </a-table-column>
            <a-table-column title='供应商数据' data-index='client'>
              <template #cell="{ record }">
                <div v-if="record.supplier_weight > 0">{{ record.supplier_weight }}(kg)<br/>{{ record.supplier_length }}*{{ record.supplier_width }}*{{ record.supplier_height }}(cm)</div>
                <div v-else> - </div>
              </template>
            </a-table-column>
            <a-table-column title='提单号' data-index='type'>
              <template #cell="{ record }">
                {{ record.waybill_info?.[0]?.public_number??'-' }}
              </template>
            </a-table-column>
            <a-table-column title='承运商' >
              <template #cell="{ record }">
              {{record.outer_carrier_code}}<br>
              <p><a-link :href="carrerLink(record)" target="_blank">{{record.outer_carrier_tracking_number}}</a-link></p>

              </template>
            </a-table-column>

<!--            <a-table-column title='快递标' data-index='volume'></a-table-column>-->
<!--            <a-table-column title='FBA标' data-index='volume'></a-table-column>-->
<!--            <a-table-column title='换标' data-index='volume'></a-table-column>-->
<!--            <a-table-column title='核对' data-index='volume'></a-table-column>-->
<!--            <a-table-column title='查货' data-index='volume'></a-table-column>-->
            <a-table-column title="货站" data-index="depot_id">
              <template #cell="{ record }">
                {{!record.depot_id ? '-' : depotList.filter(i=>i.id ==record.depot_id)[0]?.name}}
              </template>
            </a-table-column>
            <a-table-column title='状态' data-index='status_desc.label'></a-table-column>
          </template>
          <template #td>
            <td class="td-no-padding" />
          </template>
        </a-table>
      </div>
      </a-collapse-item>
    </a-collapse>
  </a-grid-item>
  <pickup v-model="visible.pickup" v-if="visible.pickup"></pickup>
  <fba v-model="visible.fba" v-if="visible.fba"></fba>
  <turn v-model="visible.turn" v-if="visible.turn"></turn>
  <update v-model="visible.update" v-if="visible.update"></update>
  <add v-model="visible.add" v-if="visible.add"></add>
</template>

<style>
.td-no-padding .arco-table-cell{
  padding: 0 1rem 0 0.2rem;
}
.tablePrant{
  height: 400px;
}
</style>